dpot-frontend/app/(main)/watch/[channelSID]/donation-modal.scss

.donation-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;

	&__overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	&__box {
		position: relative;
		width: 100%;
		max-width: 420px;
		max-height: 90vh;
		overflow-y: auto;
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 24px;
	}

	&__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	&__title {
		font-size: 1.1rem;
		font-weight: 600;
		margin: 0;
	}

	&__close {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: var(--muted-foreground);
		line-height: 1;
	}

	&__field {
		margin-bottom: 16px;

		> label {
			display: block;
			font-size: 0.8125rem;
			font-weight: 500;
			margin-bottom: 6px;
			color: var(--foreground);
		}

		> input, > textarea {
			width: 100%;
			padding: 8px 12px;
			border: 1px solid var(--border);
			border-radius: 6px;
			font-size: 0.875rem;
			background: var(--background);
			color: var(--foreground);
			resize: none;
		}
	}

	&__presets {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 8px;
	}

	&__preset {
		padding: 6px 12px;
		border: 1px solid var(--border);
		border-radius: 20px;
		background: var(--background);
		color: var(--foreground);
		font-size: 0.8125rem;
		cursor: pointer;
		transition: all 0.15s;

		&:hover {
			border-color: var(--primary);
		}

		&--active {
			background: hsl(var(--primary));
			color: hsl(var(--primary-foreground));
			border-color: hsl(var(--primary));
		}
	}

	// 크루원 선택
	&__crew {
		margin-bottom: 16px;
		padding: 12px;
		background: var(--accent);
		border-radius: 8px;
	}

	&__crew-label {
		display: block;
		font-size: 0.8125rem;
		font-weight: 500;
		margin-bottom: 8px;
	}

	&__crew-tag {
		display: inline-block;
		padding: 2px 8px;
		background: hsl(var(--primary) / 0.15);
		color: hsl(var(--primary));
		border-radius: 4px;
		font-size: 0.75rem;
		font-weight: 600;
		margin-left: 4px;
	}

	&__crew-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	&__crew-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 8px 12px;
		border: 2px solid var(--border);
		border-radius: 8px;
		background: var(--background);
		cursor: pointer;
		font-size: 0.75rem;
		min-width: 72px;
		transition: all 0.15s;

		&:hover {
			border-color: hsl(var(--primary) / 0.5);
		}

		&--active {
			border-color: hsl(var(--primary));
			background: hsl(var(--primary) / 0.05);
		}

		> span {
			font-weight: 500;
			max-width: 64px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	&__crew-thumb {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;

		&--default {
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--muted);
			color: var(--muted-foreground);
			font-size: 0.875rem;
			font-weight: 600;
		}
	}

	// 푸터
	&__footer {
		display: flex;
		gap: 8px;
		justify-content: flex-end;
		margin-top: 20px;
	}

	&__btn {
		padding: 8px 20px;
		border-radius: 6px;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		border: 1px solid var(--border);
		background: var(--background);
		color: var(--foreground);
		transition: all 0.15s;

		&:hover {
			background: var(--accent);
		}

		&--primary {
			background: hsl(var(--primary));
			color: hsl(var(--primary-foreground));
			border-color: hsl(var(--primary));

			&:hover {
				opacity: 0.9;
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}

	// 완료 화면
	&__done {
		text-align: center;
		padding: 24px 0;
	}

	&__done-icon {
		font-size: 3rem;
		margin-bottom: 12px;
	}

	&__done-text {
		font-size: 1.1rem;
		font-weight: 600;
		margin-bottom: 20px;
	}
}